<template>
	<view class="index">
		<view class="top">
			<view class="title">累计收入</view>
			<view class="money">{{ bonus }}</view>
			<view class="moneybox">
				<view class="left">
					<view>已提现</view>
					<view>{{ amount }}</view>
				</view>
				<view class="right">
					<view>当前余额</view>
					<view>{{ balance }}</view>
				</view>
			</view>
		</view>
		<view class="itemBox">
			<view class="item" v-for="(item, index) in list" :key="index">
				<text class="item__left-icon" :class="[`iconfontPT ${item.icon}`]"></text>
				<view class="listmsg" @click="next(item, index)">
					<text>{{ item.name }}</text>
					<text class="iconfontPT iconxiayibu"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { finance } from '../../../apis/shop/api.js';
export default {
	data() {
		return {
			list: [
				{
					name: '余额提现',
					icon: 'iconyuetixian',
					url: ''
				},
				{
					name: '提现记录',
					icon: 'icontixianjilu',
					url: '/pages/shopmanager/cardmanager/Withdrawal'
				},
				{
					name: '银行卡管理',
					icon: 'iconyinhangkaguanli',
					url: '/pages/shopmanager/cardmanager/mycard',
					url2: '/pages/shopmanager/cardmanager/changeCard'
				},
				{
					name: '收益统计',
					icon: 'iconshouyitongji',
					url: '/pages/shopmanager/cardmanager/Statistics'
				}
			],
			store_id: '',
			token: '',
			bonus: 0,
			balance: 0,
			amount: 0,
			bank: ''
		};
	},
	onLoad() {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getData();
	},
	methods: {
		getData() {
			let that = this;
			finance({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					const { bonus, balance, amount, bank } = res.data.finance;

					that.bonus = Number(bonus).toFixed(2);
					that.balance = Number(balance).toFixed(2);
					that.amount = Number(amount).toFixed(2);
					that.bank = bank;
					// that.showData=true;
					// uni.hideLoading();
				}
			});
		},
		next(item, index) {
			if (item.url == '') {
				uni.showToast({
					title: '该功能暂未开放,敬请期待!',
					icon: 'none'
				});
			} else {
				if (index == 2 && !this.bank) {
					item.url = item.url2;
				}
				uni.navigateTo({
					url: item.url
				});
			}
		}
	}
};
</script>

<style lang="less">
.top {
	background-color: #e41805;
	text-align: center;
	font-size: 30rpx;
	color: #fff;
	padding: 60rpx 0;

	.moneybox {
		display: flex;
		margin-top: 78rpx;

		.left,
		.right {
			flex: 1;

			view {
				&:nth-child(2) {
					line-height: 48rpx;
				}
			}
		}
	}

	.money {
		font-size: 58rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}
}

.itemBox {
	.item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx;

		&__left-icon {
			padding-top: 3rpx;
		}

		.iconfontPT {	
			font-size: 35rpx;

			&.iconyuetixian {
				color: #e41802;
			}

			&.icontixianjilu {
				color: #5696f7;
			}

			&.iconyinhangkaguanli {
				color: #fab34f;
			}

			&.iconshouyitongji {
				color: #de54fb;
			}
		}

		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 36rpx;
		}

		.listmsg {
			// flex: 1;
			// padding: 10rpx 30rpx 10rpx 0;
			border-bottom: 1rpx solid rgba(207,207,207, .5);
			// line-height: 86rpx;
			margin-left: 30rpx;
			width: calc(100% - 50rpx);
			padding-bottom: 30rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				color: #333;
				font-size: 28rpx;
				
				&:nth-child(2) {
					font-size: 26rpx;
					color: #ccc;
				}
			}
		}
	}
}
</style>
